<template>
  <!-- <el-tabs 
    class="fault-right"  
    v-model="activeName" 
    @tab-click="handleClick"
  > -->
  <div class="fault-right">
    <!-- 故障对象和故障描述详情页面特有 -->
    <!-- <el-tab-pane 
      :label="$t('faultLibrary.detail.nextLevel')" 
      name="nextLevelMes"
      v-loading="loading"
    >
    > -->
    <div v-if="rightActiveTab=='nextLevelMes'" ref="nextLevelMes">
      <el-button type="primary" @click="showCreate">{{ $t('common.base.create') }}</el-button>
      <el-input 
        style="width:168px; float: right; margin-bottom: 10px;"
        v-model="keyword" 
        prefix-icon="el-icon-search"
        clearable
        :placeholder="$t('common.base.tip.defaultPlaceholder')"
        @input="getChildData">
      </el-input>
      <el-table
        :data="descriptionList"
        border
        header-row-class-name="common-list-table-header__v2"
        row-class-name="customer-event-table-row"
        style="width: 100%">
        <el-table-column
          prop="faultLabel"
          :label="$t('common.base.label')">
        </el-table-column>
        <el-table-column
          prop="faultDesc"
          :label="$t('common.base.title')">
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="total"
        style="text-align:right;margin-top:20px;"
        background
        @current-change="currentChange"
        @size-change="handleSizeChange"
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
      >
    </el-pagination>

    </div>
    <!-- </el-tab-pane> -->

    <!-- <el-tab-pane 
      :label="$t('common.base.task')" 
      name="task"
      v-loading="loading"
    > -->
      <taskList v-else-if="rightActiveTab=='task'" ref="task" :task-list="taskData" @getData="getTaskTableData"/>
    <!-- </el-tab-pane> -->

    <!-- <el-tab-pane 
      :label="$t('common.base.comment')" 
      name="remark"
    >
      <RemarkList :page-data="query"/>
    </el-tab-pane>
      
  </el-tabs>
    > -->
      <RemarkList v-else :page-data="query"/>
    <!-- </el-tab-pane> -->
    <FaultDescription 
      v-model="faultDescriptionDialogVisible" 
      :create-fault-data="createFaultData"
      @operateSuc="operateSuc"
    />
  </div>
  <!-- </el-tabs> -->
</template>
        
<script>
import FaultDescription from '@src/modules/faultLibrary/components/FaultInformationDialog/FaultDescription';
import taskList from './TaskTable';
import RemarkList from './remarkList'
// api
import { 
  faultDetail,
  getTaskFaultList, // 故障节点对应工单数据查询
  searchChildList, //根据父节点获取对应的子节点列表数据
} from '@src/api/Fault';

export default{
  // 故障详情页面的右边的部分（故障对象和故障描述类型）
  name:'FaultRight',
      
  data(){
    return {
      activeName:'nextLevelMes',
      taskData: [],
      descriptionList: [],
      loading: false,

      page:{
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      keyword:'',
      faultDescriptionDialogVisible: false,
      createFaultData: {
        faultLabel: '',
        faultLevel: 1,
        parentDesc: '',
        parentId: '',
      },
    }
  },
  
  props:{
    query:{
      type:Object
    },
    rightActiveTab: {
      type:String
    }
  },
    
  components:{
    taskList,
    RemarkList,
    FaultDescription,
  },
    
  mounted(){
    faultDetail({faultId: this.query.id}).then(res=>{
      if(res.status === 0){
        let attribute = res.data.attribute || {}
        res.data = {
          ...res.data,
          ...attribute,
        }
        this.createFaultData.parentDesc = res.data.faultDesc
        this.createFaultData.faultLabel = res.data.faultLabel
        this.createFaultData.faultLevel = res.data.faultLevel
      }
    })
    this.createFaultData.parentId = this.query.id
  },
      
  methods: {

    handleClick(){
      this.getTaskTableData()
    },

    // 供父组件调用，获取表单字段和表单元素值的接口数据
    getPortPromise(){
      const { id } = this.query || {}
      return searchChildList({faultId:id, ...this.page})
    },

    // 供父组件调用，接口成功后的回调
    setData(res){
      const { status, data } = res || {}
      if(status === 0){
        this.descriptionList = data.list || []
        this.total = data.totalSize || 0
      }
    },

    async getTaskTableData(params = {}){
      this.loading = true
      const res = await getTaskFaultList({faultId: this.query.id, ...params});

      this.loading = false

      this.taskData = res.data?.list || []
    },

    async getChildData(){
      this.loading = true
      const res = await searchChildList({faultId:this.query.id, ...this.page, faultDesc:this.keyword});
      this.loading = false

      this.setData(res)
    },

    

    currentChange(pageNum){
      this.page.pageNum = pageNum
      this.getChildData()
    },

    handleSizeChange(pageSize){
      this.page.pageNum = 1
      this.page.pageSize = pageSize
      this.getChildData()
    },

    showCreate() {
      this.faultDescriptionDialogVisible = true;
    },

    operateSuc(){
      this.$emit('getData');
      this.getChildData();
    }
  }
}
</script>

<style lang="scss" scoped>
.fault-right ::v-deep{
  .el-tabs__content{
    padding:6px 16px;
  }
  padding:16px;
  .el-table{
    border: 1px solid #EBEEF5;
    .el-table__cell .cell{
      .el-button,&{
        @include text-ellipsis();
      }
      
    }
  }
}
</style>